import {translatePath} from '@remotion/paths';
import {makeCircle, makeRect} from '@remotion/shapes';
import React from 'react';
import {RotateX} from '../3DContext/transformation-context';
import {G3D} from './G3D';
import {SpinEffect} from './SpinEffect';

export const ThreeDSvgContent: React.FC = () => {
	return (
		<svg
			width="574"
			height="434"
			viewBox="0 0 574 434"
			fill="none"
			xmlns="http://www.w3.org/2000/svg"
		>
			<rect width="574" height="434" fill="#F8FAFC" />
			<RotateX radians={0}>
				<G3D backFace="red" d="M 0 0 L 574 434" depth={0}>
					<g id="remotionwebcodecs">
						<text
							id="@remotion/webcodecs"
							fill="black"
							xmlSpace="preserve"
							style={{whiteSpace: 'pre'}}
							fontFamily="GT Planar"
							fontSize="21"
							fontWeight="bold"
							letterSpacing="0em"
						>
							<tspan x="171.172" y="34.001">
								@remotion/webcodecs
							</tspan>
						</text>
						<g id="Video Conversion in the browser Experimental">
							<text
								fill="black"
								xmlSpace="preserve"
								style={{whiteSpace: 'pre'}}
								fontFamily="GT Planar"
								fontSize="10"
								fontWeight="500"
								letterSpacing="0em"
							>
								<tspan x="179" y="50.81">
									Video Conversion in the browser{' '}
								</tspan>
							</text>
							<text
								fill="#0B84F3"
								xmlSpace="preserve"
								style={{whiteSpace: 'pre'}}
								fontFamily="GT Planar"
								fontSize="10"
								fontWeight="500"
								letterSpacing="0em"
							>
								<tspan x="333.199" y="50.81">
									Experimental
								</tspan>
							</text>
						</g>
						<SpinEffect>
							<G3D
								backFace="red"
								d="M212 81C212 76.0294 216.029 72 221 72H353C357.971 72 362 76.0294 362 81V185C362 189.971 357.971 194 353 194H221C216.029 194 212 189.971 212 185V81Z"
								depth={10}
								id="Group 30"
							>
								<path
									id="Rectangle 4"
									d="M212 81C212 76.0294 216.029 72 221 72H353C357.971 72 362 76.0294 362 81V185C362 189.971 357.971 194 353 194H221C216.029 194 212 189.971 212 185V81Z"
									fill="white"
									stroke="black"
									strokeWidth="2"
								/>
								<text
									id="WebM"
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="14"
									fontWeight="500"
									letterSpacing="0em"
								>
									<tspan x="302" y="138.334">
										WebM
									</tspan>
								</text>
								<text
									id="MP4"
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="14"
									fontWeight="500"
									letterSpacing="0em"
								>
									<tspan x="225" y="138.334">
										MP4
									</tspan>
								</text>
								<text
									id="AVI"
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="14"
									fontWeight="500"
									letterSpacing="0em"
								>
									<tspan x="272.07" y="178.334">
										AVI
									</tspan>
								</text>
								<text
									id="Multiple formats"
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="11"
									fontWeight="bold"
									letterSpacing="0em"
								>
									<tspan x="241" y="91.691">
										Multiple formats
									</tspan>
								</text>
								<path
									id="Arrow 1"
									d="M256.265 120.597C256.386 121.003 256.813 121.234 257.218 121.114L263.831 119.148C264.237 119.027 264.468 118.6 264.348 118.194C264.227 117.788 263.8 117.557 263.395 117.678L257.516 119.426L255.769 113.547C255.648 113.142 255.221 112.91 254.816 113.031C254.41 113.152 254.179 113.578 254.299 113.984L256.265 120.597ZM307.475 121.136C307.893 121.201 308.285 120.915 308.35 120.497L309.411 113.68C309.476 113.261 309.19 112.869 308.771 112.804C308.353 112.739 307.961 113.026 307.896 113.444L306.953 119.503L300.894 118.561C300.475 118.496 300.084 118.782 300.018 119.2C299.953 119.619 300.24 120.011 300.658 120.076L307.475 121.136ZM257.674 120.744C267.329 102.92 292.687 101.281 306.974 120.831L308.212 119.926C293.369 99.6155 266.602 101.043 256.326 120.014L257.674 120.744Z"
									fill="#0B84F3"
								/>
								<path
									id="Arrow 3"
									d="M246.394 149.598C246.095 149.299 245.611 149.299 245.312 149.598L240.444 154.466C240.145 154.765 240.145 155.249 240.444 155.548C240.742 155.847 241.227 155.847 241.526 155.548L245.853 151.221L250.181 155.548C250.479 155.847 250.964 155.847 251.262 155.548C251.561 155.249 251.561 154.765 251.262 154.466L246.394 149.598ZM265.173 173.879C257.983 171.987 253.392 169.372 250.575 165.647C247.757 161.919 246.618 156.953 246.618 150.139L245.088 150.139C245.088 157.094 246.244 162.456 249.355 166.569C252.466 170.685 257.438 173.426 264.783 175.359L265.173 173.879Z"
									fill="#0B84F3"
								/>
								<path
									id="Arrow 4"
									d="M321.594 149.598C321.893 149.299 322.377 149.299 322.676 149.598L327.544 154.466C327.843 154.765 327.843 155.249 327.544 155.548C327.245 155.847 326.761 155.847 326.462 155.548L322.135 151.221L317.807 155.548C317.509 155.847 317.024 155.847 316.725 155.548C316.427 155.249 316.427 154.765 316.725 154.466L321.594 149.598ZM302.815 173.879C310.005 171.987 314.596 169.372 317.413 165.647C320.231 161.919 321.37 156.953 321.37 150.139L322.9 150.139C322.9 157.094 321.744 162.456 318.633 166.569C315.521 170.685 310.55 173.426 303.204 175.359L302.815 173.879Z"
									fill="#0B84F3"
								/>
							</G3D>
						</SpinEffect>

						<g id="Challenges">
							<rect
								id="Rectangle 5"
								x="371"
								y="293"
								width="157"
								height="90"
								rx="9"
								fill="white"
								stroke="black"
								strokeWidth="2"
							/>
							<text
								id="&#240;&#159;&#154;&#167; Challenges"
								fill="black"
								xmlSpace="preserve"
								style={{whiteSpace: 'pre'}}
								fontFamily="GT Planar"
								fontSize="11"
								fontWeight="bold"
								letterSpacing="0em"
							>
								<tspan x="380" y="312.691">
									&#x1f6a7; Challenges
								</tspan>
							</text>
							<g id="Cross-browser support Safari Limitations">
								<text
									fill="#666666"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="11"
									letterSpacing="0em"
								>
									<tspan x="380" y="342.691">
										Safari Limitations
									</tspan>
								</text>
								<text
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="11"
									fontWeight="500"
									letterSpacing="0em"
								>
									<tspan x="380" y="329.691">
										Cross-browser support&#10;
									</tspan>
								</text>
							</g>
							<g id="Format compatibility Currently 70% success rate">
								<text
									fill="#666666"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="11"
									letterSpacing="0em"
								>
									<tspan x="380" y="372.691">
										Currently 70% success rate
									</tspan>
								</text>
								<text
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="11"
									fontWeight="500"
									letterSpacing="0em"
								>
									<tspan x="380" y="359.691">
										Format compatibility&#10;
									</tspan>
								</text>
							</g>
						</g>
						<g id="Faster">
							<g id="Group 31">
								<rect
									id="Rectangle 6"
									x="371"
									y="72"
									width="157"
									height="47"
									rx="9"
									fill="white"
									stroke="black"
									strokeWidth="2"
								/>
								<g id="3x faster than fastest alternative[1]">
									<text
										fill="black"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="11"
										letterSpacing="0em"
									>
										<tspan x="456.814" y="93.691">
											{' '}
											than&#10;
										</tspan>
										<tspan x="410" y="106.691">
											fastest alternative
										</tspan>
									</text>
									<text
										fill="#0B84F3"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="11"
										fontWeight="bold"
										letterSpacing="0em"
									>
										<tspan x="410" y="93.691">
											3x faster
										</tspan>
									</text>
									<text
										fill="#0B84F3"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="11"
										letterSpacing="0em"
									>
										<tspan x="502.823" y="106.691">
											[&#xb9;]
										</tspan>
									</text>
								</g>
								<text
									id="&#240;&#159;&#144;&#134;"
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="20"
									fontWeight="500"
									letterSpacing="0em"
								>
									<tspan x="382" y="104.6">
										&#x1f406;
									</tspan>
								</text>
							</g>
						</g>
						<g id="Size">
							<g id="Group 40">
								<rect
									id="Rectangle 6_2"
									x="371"
									y="130"
									width="157"
									height="47"
									rx="9"
									fill="white"
									stroke="black"
									strokeWidth="2"
								/>
								<g id="Small footprint 200KB">
									<text
										fill="black"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="13"
										fontWeight="bold"
										letterSpacing="0em"
									>
										<tspan x="410" y="164.691">
											200KB
										</tspan>
									</text>
									<text
										fill="black"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="11"
										letterSpacing="0em"
									>
										<tspan x="410" y="149.691">
											Small footprint&#10;
										</tspan>
									</text>
								</g>
								<text
									id="&#240;&#159;&#170;&#182;"
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="20"
									fontWeight="500"
									letterSpacing="0em"
								>
									<tspan x="382" y="162.6">
										&#x1fab6;
									</tspan>
								</text>
							</g>
						</g>
						<g id="Convert">
							<g clipPath="url(#clip0_0_1)">
								<g id="GUI">
									<rect
										id="Rectangle 6_3"
										x="28"
										y="151"
										width="176"
										height="91"
										rx="10"
										fill="white"
									/>
									<text
										id="remotion.dev/convert"
										fill="#0B84F3"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="11"
										letterSpacing="0em"
										textDecoration="underline"
									>
										<tspan x="90" y="222.691">
											remotion.dev/convert
										</tspan>
									</text>
									<rect
										id="image 6"
										x="25"
										y="143"
										width="179"
										height="161"
										fill="url(#pattern0_0_1)"
									/>
								</g>
								<g id="Rectangle 8">
									<mask id="path-26-inside-1_0_1" fill="white">
										<path d="M28 289H209V328H28V289Z" />
									</mask>
									<path d="M28 289H209V328H28V289Z" fill="white" />
									<path
										d="M28 291H209V287H28V291Z"
										fill="black"
										mask="url(#path-26-inside-1_0_1)"
									/>
								</g>
								<g id="Try: remotion.dev/convert">
									<text
										fill="black"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="12"
										fontWeight="bold"
										letterSpacing="0em"
									>
										<tspan x="40" y="311.572">
											Try:{' '}
										</tspan>
									</text>
									<text
										fill="#0B84F3"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="12"
										fontWeight="bold"
										letterSpacing="0em"
										textDecoration="underline"
									>
										<tspan x="64.75" y="311.572">
											remotion.dev/convert
										</tspan>
									</text>
								</g>
							</g>
							<rect
								x="29"
								y="152"
								width="174"
								height="175"
								rx="9"
								stroke="black"
								strokeWidth="2"
							/>
						</g>
						<g id="Vision">
							<g id="Vision_2">
								<rect
									id="Rectangle 7"
									x="29"
									y="336"
									width="333"
									height="47"
									rx="9"
									fill="white"
									stroke="black"
									strokeWidth="2"
								/>
								<g id="Vision: Eliminate the need of a server for video processing &#226;&#128;&#147; cut cost and complexity">
									<text
										fill="black"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="11"
										letterSpacing="0em"
									>
										<tspan x="102.589" y="356.691">
											{' '}
										</tspan>
										<tspan x="255.955" y="356.691">
											{' '}
											for{' '}
										</tspan>
										<tspan x="67" y="369.691">
											video processing &#x2013; cut cost and complexity
										</tspan>
									</text>
									<text
										fill="black"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="11"
										fontWeight="bold"
										letterSpacing="0em"
									>
										<tspan x="67" y="356.691">
											Vision:
										</tspan>
									</text>
									<text
										fill="#0B84F3"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="11"
										letterSpacing="0em"
									>
										<tspan x="105.393" y="356.691">
											Eliminate the need of a server
										</tspan>
									</text>
								</g>
								<text
									id="&#240;&#159;&#146;&#161;"
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="20"
									letterSpacing="0em"
								>
									<tspan x="40" y="367.6">
										&#x1f4a1;
									</tspan>
								</text>
							</g>
						</g>
						<SpinEffect>
							<G3D
								backFace="green"
								d={translatePath(
									makeRect({width: 150, height: 124, cornerRadius: 9}).path,
									212,
									203,
								)}
								depth={5}
								id="Operations"
							>
								<rect
									id="Rectangle 7_2"
									x="212"
									y="203"
									width="150"
									height="124"
									rx="9"
									fill="white"
									stroke="black"
									strokeWidth="2"
								/>
								<g id="Group 49">
									<g id="Group 41">
										<g id="WIP">
											<circle
												id="Ellipse 3"
												cx="232"
												cy="273"
												r="6"
												fill="#D9D9D9"
											/>
											<path
												id="Vector"
												d="M232.294 271.433L232.327 272.436C232.331 272.565 232.441 272.668 232.571 272.663L233.573 272.626C233.636 272.624 233.696 272.596 233.738 272.551L235.111 271.079C235.222 270.96 235.417 270.986 235.474 271.139C235.844 272.116 235.655 273.264 234.891 274.083C234.173 274.854 233.13 275.137 232.175 274.92L230.945 276.238C230.677 276.525 230.228 276.542 229.942 276.275L228.906 275.31C228.621 275.043 228.606 274.594 228.874 274.307L230.103 272.988C229.819 272.051 230.029 270.99 230.748 270.22C231.512 269.401 232.644 269.132 233.646 269.432C233.802 269.478 233.842 269.671 233.73 269.791L232.357 271.263C232.315 271.308 232.292 271.37 232.294 271.433Z"
												fill="white"
											/>
										</g>
										<text
											id="Compressing"
											fill="#666666"
											xmlSpace="preserve"
											style={{whiteSpace: 'pre'}}
											fontFamily="GT Planar"
											fontSize="11"
											fontWeight="500"
											letterSpacing="0em"
										>
											<tspan x="242" y="276.691">
												Compressing
											</tspan>
										</text>
									</g>
									<g id="Group 46">
										<g id="Checkmark">
											<circle
												id="Ellipse 2"
												cx="232"
												cy="256"
												r="6"
												fill="white"
											/>
											<g id="circle-check-solid 1" clipPath="url(#clip1_0_1)">
												<path
													id="Vector_2"
													d="M225.939 256C225.939 252.686 228.625 250 231.939 250C235.253 250 237.939 252.686 237.939 256C237.939 259.314 235.253 262 231.939 262C228.625 262 225.939 259.314 225.939 256ZM234.653 254.964C234.909 254.709 234.909 254.291 234.653 254.036C234.398 253.78 233.98 253.78 233.725 254.036L231.189 256.572L230.153 255.536C229.898 255.28 229.48 255.28 229.225 255.536C228.97 255.791 228.97 256.209 229.225 256.464L230.725 257.964C230.98 258.22 231.398 258.22 231.653 257.964L234.653 254.964Z"
													fill="#0B84F3"
												/>
											</g>
										</g>
										<text
											id="Mirroring"
											fill="black"
											xmlSpace="preserve"
											style={{whiteSpace: 'pre'}}
											fontFamily="GT Planar"
											fontSize="11"
											fontWeight="500"
											letterSpacing="0em"
										>
											<tspan x="242" y="259.691">
												Mirroring
											</tspan>
										</text>
									</g>
									<g id="Group 47">
										<g id="Checkmark_2">
											<circle
												id="Ellipse 2_2"
												cx="232"
												cy="239"
												r="6"
												fill="white"
											/>
											<g id="circle-check-solid 1_2" clipPath="url(#clip2_0_1)">
												<path
													id="Vector_3"
													d="M225.939 239C225.939 235.686 228.625 233 231.939 233C235.253 233 237.939 235.686 237.939 239C237.939 242.314 235.253 245 231.939 245C228.625 245 225.939 242.314 225.939 239ZM234.653 237.964C234.909 237.709 234.909 237.291 234.653 237.036C234.398 236.78 233.98 236.78 233.725 237.036L231.189 239.572L230.153 238.536C229.898 238.28 229.48 238.28 229.225 238.536C228.97 238.791 228.97 239.209 229.225 239.464L230.725 240.964C230.98 241.22 231.398 241.22 231.653 240.964L234.653 237.964Z"
													fill="#0B84F3"
												/>
											</g>
										</g>
										<text
											id="Rotating"
											fill="black"
											xmlSpace="preserve"
											style={{whiteSpace: 'pre'}}
											fontFamily="GT Planar"
											fontSize="11"
											fontWeight="500"
											letterSpacing="0em"
										>
											<tspan x="242" y="242.691">
												Rotating
											</tspan>
										</text>
									</g>
									<SpinEffect delay={2}>
										<G3D
											backFace="blue"
											d={translatePath(
												makeCircle({radius: 6}).path,
												232 - 6,
												222 - 6,
											)}
											depth={5}
											strokeWidth={2}
											id="Checkmark_3"
										>
											<circle
												id="Ellipse 2_3"
												cx="232"
												cy="222"
												r="6"
												stroke="black"
												strokeWidth={2}
												fill="white"
											/>
											<g id="circle-check-solid 1_3" clipPath="url(#clip3_0_1)">
												<path
													id="Vector_4"
													d="M225.939 222C225.939 218.686 228.625 216 231.939 216C235.253 216 237.939 218.686 237.939 222C237.939 225.314 235.253 228 231.939 228C228.625 228 225.939 225.314 225.939 222ZM234.653 220.964C234.909 220.709 234.909 220.291 234.653 220.036C234.398 219.78 233.98 219.78 233.725 220.036L231.189 222.572L230.153 221.536C229.898 221.28 229.48 221.28 229.225 221.536C228.97 221.791 228.97 222.209 229.225 222.464L230.725 223.964C230.98 224.22 231.398 224.22 231.653 223.964L234.653 220.964Z"
													fill="#0B84F3"
												/>
											</g>
										</G3D>{' '}
									</SpinEffect>

									<text
										id="Resizing"
										fill="black"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="11"
										fontWeight="500"
										letterSpacing="0em"
									>
										<tspan x="242" y="225.691">
											Resizing
										</tspan>
									</text>
									<g id="Group 43">
										<g id="WIP_2">
											<circle
												id="Ellipse 3_2"
												cx="232"
												cy="290"
												r="6"
												fill="#D9D9D9"
											/>
											<path
												id="Vector_5"
												d="M232.294 288.433L232.327 289.436C232.331 289.565 232.441 289.668 232.571 289.663L233.573 289.626C233.636 289.624 233.696 289.596 233.738 289.551L235.111 288.079C235.222 287.96 235.417 287.986 235.474 288.139C235.844 289.116 235.655 290.264 234.891 291.083C234.173 291.854 233.13 292.137 232.175 291.92L230.945 293.238C230.677 293.525 230.228 293.542 229.942 293.275L228.906 292.31C228.621 292.043 228.606 291.594 228.874 291.307L230.103 289.988C229.819 289.051 230.029 287.99 230.748 287.22C231.512 286.401 232.644 286.132 233.646 286.432C233.802 286.478 233.842 286.671 233.73 286.791L232.357 288.263C232.315 288.308 232.292 288.37 232.294 288.433Z"
												fill="white"
											/>
										</g>
										<text
											id="Cropping"
											fill="#666666"
											xmlSpace="preserve"
											style={{whiteSpace: 'pre'}}
											fontFamily="GT Planar"
											fontSize="11"
											fontWeight="500"
											letterSpacing="0em"
										>
											<tspan x="242" y="293.691">
												Cropping
											</tspan>
										</text>
									</g>
									<g id="Group 45">
										<g id="WIP_3">
											<circle
												id="Ellipse 3_3"
												cx="232"
												cy="307"
												r="6"
												fill="#D9D9D9"
											/>
											<path
												id="Vector_6"
												d="M232.294 305.433L232.327 306.436C232.331 306.565 232.441 306.668 232.571 306.663L233.573 306.626C233.636 306.624 233.696 306.596 233.738 306.551L235.111 305.079C235.222 304.96 235.417 304.986 235.474 305.139C235.844 306.116 235.655 307.264 234.891 308.083C234.173 308.854 233.13 309.137 232.175 308.92L230.945 310.238C230.677 310.525 230.228 310.542 229.942 310.275L228.906 309.31C228.621 309.043 228.606 308.594 228.874 308.307L230.103 306.988C229.819 306.051 230.029 304.99 230.748 304.22C231.512 303.401 232.644 303.132 233.646 303.432C233.802 303.478 233.842 303.671 233.73 303.791L232.357 305.263C232.315 305.308 232.292 305.37 232.294 305.433Z"
												fill="white"
											/>
										</g>
										<text
											id="Trimming"
											fill="#666666"
											xmlSpace="preserve"
											style={{whiteSpace: 'pre'}}
											fontFamily="GT Planar"
											fontSize="11"
											fontWeight="500"
											letterSpacing="0em"
										>
											<tspan x="242" y="310.691">
												Trimming
											</tspan>
										</text>
									</g>
								</g>
							</G3D>
						</SpinEffect>
						<g id="License">
							<rect
								id="Rectangle 2"
								x="371"
								y="188"
								width="157"
								height="41"
								rx="9"
								fill="white"
								stroke="black"
								strokeWidth="2"
							/>
							<g id="Remotion License Free for teams &#60;4">
								<text
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="11"
									fontWeight="500"
									letterSpacing="0em"
								>
									<tspan x="410" y="205.691">
										Remotion License&#10;
									</tspan>
								</text>
								<text
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="11"
									letterSpacing="0em"
								>
									<tspan x="410" y="218.691">
										Free for teams &#60;4
									</tspan>
								</text>
							</g>
							<rect
								id="image 2"
								x="382"
								y="197"
								width="21"
								height="22"
								fill="url(#pattern1_0_1)"
							/>
						</g>
						<g id="GPU">
							<g id="First ever">
								<rect
									id="Rectangle 7_3"
									x="29"
									y="72"
									width="174"
									height="71"
									rx="9"
									fill="white"
									stroke="black"
									strokeWidth="2"
								/>
								<g id="First ever video conversion library on the web with GPU acceleration">
									<text
										fill="black"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="11"
										letterSpacing="0em"
									>
										<tspan x="140.912" y="105.691">
											{' '}
											library&#10;
										</tspan>
										<tspan x="84" y="118.691">
											on the web with&#10;
										</tspan>
										<tspan x="84" y="131.691">
											GPU acceleration
										</tspan>
									</text>
									<text
										fill="black"
										xmlSpace="preserve"
										style={{whiteSpace: 'pre'}}
										fontFamily="GT Planar"
										fontSize="11"
										fontWeight="bold"
										letterSpacing="0em"
									>
										<tspan x="84" y="92.691">
											First ever video&#10;
										</tspan>
										<tspan x="84" y="105.691">
											conversion
										</tspan>
									</text>
								</g>
								<text
									id="&#240;&#159;&#148;&#173;"
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="20"
									fontWeight="500"
									letterSpacing="0em"
								>
									<tspan x="54" y="116.6">
										&#x1f52d;
									</tspan>
								</text>
							</g>
						</g>
						<g id="TypeScript">
							<rect
								id="Rectangle 2_2"
								x="371"
								y="240"
								width="157"
								height="41"
								rx="9"
								fill="white"
								stroke="black"
								strokeWidth="2"
							/>
							<g id="Written from scratch in TypeScript">
								<text
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="11"
									fontWeight="500"
									letterSpacing="0em"
								>
									<tspan x="421.87" y="270.691">
										TypeScript
									</tspan>
								</text>
								<text
									fill="black"
									xmlSpace="preserve"
									style={{whiteSpace: 'pre'}}
									fontFamily="GT Planar"
									fontSize="11"
									letterSpacing="0em"
								>
									<tspan x="410" y="257.691">
										Written from scratch&#10;
									</tspan>
									<tspan x="410" y="270.691">
										in{' '}
									</tspan>
								</text>
							</g>
							<rect
								id="image 1"
								x="378"
								y="248"
								width="25"
								height="25"
								fill="url(#pattern2_0_1)"
							/>
						</g>
						<g id="[1] Tested on a M2 MacBook Air. See github.com/remotion-dev/webcodecs-benchmark for elaboration.">
							<text
								fill="#666666"
								fillOpacity="0.59"
								xmlSpace="preserve"
								style={{whiteSpace: 'pre'}}
								fontFamily="GT Planar"
								fontSize="8"
								fontWeight="500"
								letterSpacing="0em"
							>
								<tspan x="40.9401" y="409.548">
									Tested on a M2 MacBook Air. See{' '}
								</tspan>
								<tspan x="352.831" y="409.548">
									{' '}
									for elaboration.
								</tspan>
							</text>
							<text
								fill="#666666"
								fillOpacity="0.59"
								xmlSpace="preserve"
								style={{whiteSpace: 'pre'}}
								fontFamily="GT Planar"
								fontSize="8"
								fontWeight="500"
								letterSpacing="0em"
							>
								<tspan x="33" y="409.548">
									[&#xb9;]{' '}
								</tspan>
							</text>
							<text
								fill="#666666"
								fillOpacity="0.59"
								xmlSpace="preserve"
								style={{whiteSpace: 'pre'}}
								fontFamily="GT Planar"
								fontSize="8"
								fontWeight="500"
								letterSpacing="0em"
								textDecoration="underline"
							>
								<tspan x="167.409" y="409.548">
									github.com/remotion-dev/webcodecs-benchmark
								</tspan>
							</text>
						</g>
					</g>
					<defs>
						<pattern
							id="pattern0_0_1"
							patternContentUnits="objectBoundingBox"
							width="1"
							height="1"
						>
							<use
								xlinkHref="#image0_0_1"
								transform="matrix(0.00106642 0 0 0.00118624 -0.357248 0)"
							/>
						</pattern>
						<pattern
							id="pattern1_0_1"
							patternContentUnits="objectBoundingBox"
							width="1"
							height="1"
						>
							<use
								xlinkHref="#image1_0_1"
								transform="matrix(0.0012354 0 0 0.00117925 -0.00651393 0)"
							/>
						</pattern>
						<pattern
							id="pattern2_0_1"
							patternContentUnits="objectBoundingBox"
							width="1"
							height="1"
						>
							<use xlinkHref="#image2_0_1" transform="scale(0.000976562)" />
						</pattern>
						<clipPath id="clip0_0_1">
							<rect
								x="28"
								y="151"
								width="176"
								height="177"
								rx="10"
								fill="white"
							/>
						</clipPath>
						<clipPath id="clip1_0_1">
							<rect
								width="12"
								height="12"
								fill="white"
								transform="translate(225.939 250)"
							/>
						</clipPath>
						<clipPath id="clip2_0_1">
							<rect
								width="12"
								height="12"
								fill="white"
								transform="translate(225.939 233)"
							/>
						</clipPath>
						<clipPath id="clip3_0_1">
							<rect
								width="12"
								height="12"
								fill="white"
								transform="translate(225.939 216)"
							/>
						</clipPath>
						<image
							id="image0_0_1"
							data-name="image.png"
							width="1678"
							height="843"
							xlinkHref=""
						/>
						<image
							id="image1_0_1"
							data-name="image.png"
							width="820"
							height="848"
							xlinkHref=""
						/>
						<image
							id="image2_0_1"
							data-name="image.png"
							width="1024"
							height="1024"
							xlinkHref=""
						/>
					</defs>
				</G3D>
			</RotateX>
		</svg>
	);
};
